<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>QQ音乐</title>
</head>
<style>
    /* css 内容请写到这里（第二节课内容） */
    .test{
        width: 100px;
        height: 100px;
        background-repeat: no-repeat;
        background-image: url("assets/del.png");
        background-position: center;
    }
    body{
        background-color: cornsilk;
    }
    .all{
        margin-left: 200px;
    }
    .logoCla{
        margin-bottom: 20px;
    }
    .logoImgCla{
        width: 360px;
    }
    .area{
        width: 90px;
        display: inline-block;
        margin-right: 30px;
        font-size: 30px;
        text-align: center;
    }
    .detCla{
        margin-top: 310px;
    }
    .delimCla{
        opacity: 0;
    }
    .songsCla{
        display: flex;
        flex-wrap: wrap;
    }
    .songCla{
        display: inline-table;
        width: 300px;
        height: 365px;
        margin-right: 50px;
        margin-top: 30px;
        margin-bottom: 30px;
    }
    .songNameCla{
        font:Georgia, "Times New Roman", Times, serif;
        display: block;
        font-size: 25px;
        width: 300px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        word-break: keep-all;
    }
    .singerCla{
        font-size: 15px;
        display: block;
        color:darkgrey;
    }
    .publishTimeCla{
        font-size: 15px;
        display: block;
        color: darkgrey;
    }
</style>
<!-- 引入所需要的数据 -->
<script src="./js/data.js"></script>



<body>
    <div class="all">
        <div id="logo" class="logoCla">
            <img src="./assets/logo.png" class="logoImgCla">
        </div>
        <div id="category">
        </div>
        <div id="songs" class="songsCla">
        </div>
    </div>
</body>


<script>
    //console.log('数据列表：',DataList)
    //console.log('地区列表：',AreaList) 
    //AreaList为对象，对象的遍历，请自行查阅资料
    //js 内容请写到这里
    if(localStorage.getItem("savingSongs") != null){
        var ids = Array.from(JSON.parse(localStorage.getItem("savingSongs"))["id"])
        // console.log(ids["id"])
        MyDataList = getSongsInStorayge(ids, Array.from(DataList))
        // console.log(MyDataList)
        
    }else(
        MyDataList = DataList
    )
    
    function getSongsInStorayge(ids, DataList){
        var MyDataList = new Array()
        if(ids.length<1){
            return DataList
        }
        DataList.forEach(song => {
            if(ids.includes(song["id"])){
                MyDataList.push(song)
            }
        })
        return MyDataList
    }

    for (const index in AreaList) {
        var songs = document.querySelector("#songs")
        var node = document.createElement("div")
        var a = genArea(node, index)
        node.appendChild(a)
        node.setAttribute("class", "area")
        node.setAttribute("id", index)
        node.addEventListener("click", () =>
        {   
            // 更改颜色
            changeColor(index)
            // 删除所有的子节点
            var nodes = songs.childNodes
            if(nodes.length > 0){
                for (let i = nodes.length - 1; i >= 0; i--) {
                songs.removeChild(nodes[i])
            }
            }
            MyDataList.forEach(song => {
            // 添加对应的子节点
            if (song["area"] == parseInt(index) + 1){
                var songDiv = document.createElement("div")
                var imgDiv = document.createElement("div")
                imgDiv.setAttribute("style", "position:relative;")
                imgDiv.setAttribute("class", "imgCla")
                var detDiv = document.createElement("div")
                detDiv.setAttribute("class", "detCla")
                detDiv.setAttribute("style", "position:relative;")
                songDiv.setAttribute("class", "songCla")
                var im = document.createElement("img")
                var delim = document.createElement("img")
                var songName = document.createElement("a")
                songName.setAttribute("class", "songNameCla")
                songName.setAttribute("title", song["name"])
                var singer = document.createElement("a")
                singer.setAttribute("class", "singerCla")
                var publishTime = document.createElement("a")
                publishTime.setAttribute("class", "publishTimeCla")
                im.src = song["cover"]
                im.setAttribute("class", "imCla")
                im.setAttribute("style", "position:absolute; top:0; left:0;")
                delim.src = "./assets/del.png"
                delim.setAttribute("class", "delimCla")
                delim.setAttribute("style", "position:absolute; top:120px; left:120px;")
                delim.addEventListener("mouseover", disPlayDel)
                delim.addEventListener("mouseleave", redisPlayDel)
                songName.innerText = song["name"]
                singer.innerText = song["singer"]
                publishTime.innerText = song["release_time"]
                imgDiv.appendChild(im)
                imgDiv.appendChild(delim)
                detDiv.appendChild(songName)
                detDiv.appendChild(singer)
                detDiv.appendChild(publishTime)
                songDiv.appendChild(imgDiv)
                songDiv.appendChild(detDiv)
                songDiv.setAttribute("name", song["id"])
                songs.appendChild(songDiv)
            }
        })
        })
        document.querySelector("#category").appendChild(node)
    }
    // 页面初始化
    document.getElementById("0").click()
    // 更改area自己节点的颜色
    function changeColor(index){
        // console.log(document.getElementsByClassName("area"))
        var areas = Array.from(document.getElementsByClassName("area"))
        areas.forEach(
            area => {
                area.setAttribute("style", "background-color: initial")
                area.firstChild.setAttribute("style", "color: black")
            }
        )
        document.getElementById(`${index}`).setAttribute("style", "background-color: springgreen")
        document.getElementById(`${index}`).firstChild.setAttribute("style", "color: white")
    }

    function genArea(node, index){
        var a = document.createElement("a")
        // console.log(AreaList[index])
        a.innerText = AreaList[index]
        return a
    }

    // 为每一个song添加删除和点击事件
    function disPlayDel(){
        // console.log(">>>>>>")
        // console.log(this)
        // console.log(document.getElementsByClassName("delimCla"))
        var allDelImg =Array.from(document.getElementsByClassName("delimCla")) 
        allDelImg.forEach(
            delImg => {
                delImg.addEventListener("click", delSong)
                delImg.setAttribute("style", "position:absolute; top:120px; left:120px;opacity: 0;")
                delImg.parentNode.firstChild.setAttribute("style", "position:absolute; top:0; left:0;opacity: 100%;")
            }
        )
        this.setAttribute("style", "position:absolute; top:120px; left:120px;opacity: 100%;")
        var songImg = this.parentNode.firstChild
        songImg.setAttribute("style", "position:absolute; top:0; left:0;opacity: 50%;")
    }

    function redisPlayDel(){
        var allDelImg =Array.from(document.getElementsByClassName("delimCla")) 
        allDelImg.forEach(
            delImg => {
                delImg.setAttribute("style", "position:absolute; top:120px; left:120px;opacity: 0;")
                delImg.parentNode.firstChild.setAttribute("style", "position:absolute; top:0; left:0;opacity: 100%;")
            }
        )
    }

    var data = new Array()
    for (let index = 0; index < MyDataList.length; index++) {
        data.push(MyDataList[index]["id"])
    }

    function delSong(){
        // console.log(this.parentNode.parentNode)
        // 获取当前事件
        var curtime = new  Date().getTime()
        var songs = document.querySelector(".songsCla")
        songs.removeChild(this.parentNode.parentNode)
        var songName = parseInt(this.parentNode.parentNode.getAttribute("name"))
        // console.log(MyDataList)
        for (let index = 0; index < MyDataList.length; index++) {
            // console.log(MyDataList[index]["id"])
            // console.log(songName)
            if (MyDataList[index]["id"] == songName){
                MyDataList.splice(index, 1)
                data.splice(index, 1)
            }
        }
        // console.log(data)
        localStorage.setItem("savingSongs", JSON.stringify({id:data, time:curtime}))
    }
</script> 
</html>